<!-- 提货方式组件 -->
<template>
  <nut-popup class="deliveryBox" position="bottom" closeable round :style="{ height: '80%' }" @click-close-icon="sendDeliverMsg(0)" v-model:visible="props.showRound">
    <nut-cell title="提货方式" style="color: #252525; font-weight: bold"></nut-cell>
    <nut-cell>
      <nut-radio-group class="btn_box" v-model="pickUpMode" @change="checkPickUpMode" direction="horizontal">
        <nut-radio shape="button" label="2">送货</nut-radio>
        <nut-radio shape="button" label="3">直送</nut-radio>
        <nut-radio shape="button" label="1">自提</nut-radio>
      </nut-radio-group>
    </nut-cell>

    <!-- 推荐网点列表 -->
    <nut-radio-group v-model="radioVal" class="radioBox" v-if="pickUpMode == '1' || pickUpMode == '2' || pickUpMode == '3'">
      <view v-for="item in branchList" class="radio" @click="handleRadioClick(item)">
        <nut-radio :label="item.baiduDistance" icon-size="12">
          <view class="flex_ld">
            <view class="flex_st">
              <image class="car" src="@/assets/images/配送网点.png" />
              <view class="address">
                <span class="font1">{{ item.companyName || '公司名称' }}</span>
                <view class="font3">{{ item.local || '详细地址' }}</view>
                <view class="font3">距离收货地{{ item.baiduDistance }}</view>
              </view>
            </view>
            <view>
              <view class="flex_ld">
                <view class="gray_bg" @click="sendPhoneList(item.phoneList)">
                  <image class="icon" src="@/assets/images/icon1.png" />
                </view>
                <view class="gray_bg" @click="lookMap(item.latitude, item.longitude)">
                  <image class="icon" src="@/assets/images/icon2.png" />
                </view>
              </view>
            </view>
          </view>
        </nut-radio>
      </view>
    </nut-radio-group>

    <!-- 拨打电话抽屉 -->
    <nut-popup class="phoneBox" position="bottom" round :style="{ height: '50%' }" v-model:visible="showPhoneModel">
      <nut-picker :columns="phonePicker" title="拨打电话" @confirm="confirmCall" @cancel="showPhoneModel = false"></nut-picker>
    </nut-popup>

    <!-- 配送时间段 -->
    <nut-cell class="flex-ld" v-if="pickUpMode == '2'">
      <span style="color: #252525; font-weight: bold">配送时间段</span>
      <span>{{ deliveryTime }}</span>
    </nut-cell>

    <!-- 送货类型 -->
    <nut-cell class="flex-ld" v-if="pickUpMode == '2' || pickUpMode == '3'">
      <span style="color: #252525; font-weight: bold">送货类型</span>
      <nut-radio-group v-model="deliveryType" direction="horizontal">
        <nut-radio label="0">无</nut-radio>
        <nut-radio label="1">送商超</nut-radio>
        <nut-radio label="2">进仓</nut-radio>
        <nut-radio label="3">报关</nut-radio>
      </nut-radio-group>
    </nut-cell>

    <!-- 送货补贴 -->
    <nut-cell class="flex-ld" v-if="pickUpMode == '2' || pickUpMode == '3'">
      <span style="color: #252525; font-weight: bold">送货补贴</span> <nut-switch v-model="checkBonus" />
    </nut-cell>
    <nut-cell class="bg_gray flex-ld" v-if="checkBonus" @click="bonusPopup = true">
      <span>补贴类型</span>
      <span>{{ bonusStr || '请设置补贴类型' }}</span>
      <IconFont name="rect-right"></IconFont>
    </nut-cell>
    <!-- 补贴类型弹窗 -->
    <nut-popup class="bonusBox" position="bottom" round :style="{ height: '35%' }" @click-close-icon="" v-model:visible="bonusPopup">
      <nut-cell style="color: #252525; font-weight: bold">补贴类型</nut-cell>
      <nut-radio-group style="padding: 20rpx" class="btn_box" v-model="subsidyType" direction="horizontal">
        <nut-radio shape="button" label="0">无</nut-radio>
        <nut-radio shape="button" label="1">二次送货费</nut-radio>
        <nut-radio shape="button" label="2">补签单费用</nut-radio>
        <nut-radio shape="button" label="3">调增送货费</nut-radio>
      </nut-radio-group>
      <nut-cell class="ibo"> <span class="tit">费用</span> <nut-input placeholder="请输入费用金额" v-model="bonusFee" type="digit" /> <span class="tit">元</span> </nut-cell>
      <nut-button class="confirm" block type="primary" color="#0966ff" @click="confirmBonus">确定</nut-button>
    </nut-popup>

    <!-- 卸货服务 -->
    <nut-cell class="flex-ld" v-if="pickUpMode == '2' || pickUpMode == '3'">
      <span style="color: #252525; font-weight: bold">卸货服务 (送货上楼直达门口)</span> <nut-switch v-model="checkUnload" />
    </nut-cell>
    <nut-cell class="bg_gray flex-ld" v-if="checkUnload">
      <span>货物类型</span>
      <nut-radio-group v-model="dischargeServer" direction="horizontal">
        <nut-radio label="1">标准件</nut-radio>
        <nut-radio label="2">非标件</nut-radio>
        <nut-radio label="3">特殊件</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell class="bg_gray flex-ld" v-if="checkUnload" @click="uploadPopup = true">
      <span>卸货楼层</span>
      <span>{{ dischargeElevator == '0' ? '楼梯' : '电梯' }}{{ elevatorNum }}层</span>
      <span v-if="dischargeElevator != '0' && dischargeElevator != '1'">请选择卸货楼层</span>
      <IconFont name="rect-right"></IconFont>
    </nut-cell>
    <nut-popup class="unloadBox" position="bottom" round :style="{ height: '45%' }" @click-close-icon="" v-model:visible="uploadPopup">
      <nut-cell style="color: #252525; font-weight: bold">卸货楼层</nut-cell>
      <nut-radio-group style="padding: 20rpx" class="btn_box" v-model="dischargeElevator" direction="horizontal">
        <nut-radio shape="button" label="1">电梯</nut-radio>
        <nut-radio shape="button" label="0">楼梯</nut-radio>
      </nut-radio-group>
      <nut-cell>
        <nut-radio-group v-model="floorRadio" @change="handleFloorRadio" direction="horizontal">
          <nut-radio shape="button" label="1">1楼</nut-radio>
          <nut-radio shape="button" label="2">2楼</nut-radio>
          <nut-radio shape="button" label="3">3楼</nut-radio>
          <nut-radio shape="button" label="4">4楼</nut-radio>
          <nut-radio shape="button" label="5">5楼</nut-radio>
          <nut-radio shape="button" label="6">6楼</nut-radio>
          <nut-radio shape="button" label="7">7楼</nut-radio>
          <nut-radio shape="button" label="8">8楼</nut-radio>
          <nut-input placeholder="输入楼层" v-model="floorInput" input-align="center" class="floorInput" type="digit" />
        </nut-radio-group>
      </nut-cell>
      <nut-button class="confirm" block type="primary" color="#0966ff" @click="confirmFloor">确定</nut-button>
    </nut-popup>

    <!-- 货物类型  -->
    <nut-cell class="bg_gray flex-ld" @click="goodsTypePopup = true">
      <span>货物类型</span>
      <span>{{ goodsTypeStr || '选择货物类型' }}</span>
      <IconFont name="rect-right"></IconFont>
    </nut-cell>
    <nut-popup class="btn_box goodsTypeBox" position="bottom" round :style="{ height: '25%' }" @click-close-icon="" v-model:visible="goodsTypePopup">
      <nut-cell style="color: #252525; font-weight: bold; margin-bottom: 10rpx">货物类型</nut-cell>
      <nut-checkbox-group class="goodsBox" v-model="goodsType">
        <nut-checkbox shape="button" label="1">展会货物</nut-checkbox>
        <nut-checkbox shape="button" label="2">大件货物</nut-checkbox>
        <nut-checkbox shape="button" disabled label="3">特殊货物</nut-checkbox>
        <nut-checkbox shape="button" disabled label="4">填仓货物</nut-checkbox>
        <nut-checkbox shape="button" disabled label="5">特殊节假日货物</nut-checkbox>
      </nut-checkbox-group>
      <nut-button class="confirm" block type="primary" color="#0966ff" @click="confirmGoods">确定</nut-button>
    </nut-popup>

    <!-- 是否加急 -->
    <nut-cell class="bg_gray flex-ld" v-if="pickUpMode == '2' || pickUpMode == '3'">
      <span style="color: #252525; font-weight: bold">是否加急</span> <nut-switch v-model="checkedJJ" />
    </nut-cell>

    <!-- 是否限时送 -->
    <nut-cell class="bg_gray flex-ld" v-if="pickUpMode == '2' || pickUpMode == '3'">
      <span style="color: #252525; font-weight: bold">是否限时送</span> <nut-switch v-model="checkedXSS" />
    </nut-cell>

    <nut-button class="btn btnFix confirm" block type="primary" color="#0966ff" @click="sendDeliverMsg(1)">确定</nut-button>
  </nut-popup>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { getReturnForm, queryDistance } from '@/@api/wait' // 待确认页面接口
import dayjs from 'dayjs'

const emit = defineEmits(['sendDeliverMsg'])

const props = defineProps<{
  showRound: boolean
  destinationAddress: string // 到达地
  destinationBranch: string // 到达地编号
  deliveryTime: string
  pickUpMode: string // 提货方式
  deliveryType: string // 送货类型
  subsidyType: string // 送货补贴
  dischargeCargo: string // 是否卸货
  dischargeElevator: string // 是否电梯
  elevatorNum: string // 卸货几楼
  dischargeServer: string // 卸货服务-货物类型
  initUrgent: string // 是否加急
  initLimitSend: string // 是否限时送
}>()

const pickUpMode = ref('') // 提货方式

const deliveryType = ref('') // 送货类型

const checkBonus = ref(false) // 送货补贴开关
const bonusFlag = ref('') // 是否开启送货补贴-前端
const subsidyType = ref('') // 送货补贴
const bonusPopup = ref(false) // 送货补贴弹窗
const bonusStr = ref('') // 补贴类型回显文本
const bonusFee = ref('') // 补贴费用前端存

const checkUnload = ref(false) // 卸货服务按钮
const uploadPopup = ref(false) // 卸货服务弹窗
const dischargeServer = ref('') // 卸货服务-货物类型
const dischargeCargo = ref() //是否卸货
const dischargeElevator = ref() // 是否电梯
const elevatorNum = ref('') // 几楼
const floorRadio = ref('') // 选择楼层
const floorInput = ref('') // 填写楼层
// const floorStr = ref('') // 卸货服务回显文本 计算属性

const radioVal = ref('1') // 选中的label推荐网点

const goodsTypePopup = ref(false) // 货物类型弹窗
const largeCargo = ref() // 大件货物
const exhibitionGoods = ref() // 展会货物
const goodsType = ref() // 选中的货物类型复选框
const goodsTypeStr = ref() // 货物类型回显文本

// 配送时间
const deliveryTime = computed(() => {
  return props.deliveryTime.replace('&&', '-')
})

// 监听提货方式
watch(
  () => props.pickUpMode,
  (newVal) => {
    // console.log(newVal, '监听提货方式')
    if (Number(newVal) == 1) {
      pickUpMode.value = '1'
    } else if (Number(newVal) == 2) {
      pickUpMode.value = '2'
    } else if (Number(newVal) == 3) {
      pickUpMode.value = '3'
    }
  }
)

// 监听送货类型
watch(
  () => props.deliveryType,
  (newVal) => {
    // console.log(Number(newVal), '监听送货类型')
    if (Number(newVal) == 0) {
      deliveryType.value = '0'
    } else if (Number(newVal) == 1) {
      deliveryType.value = '1'
    } else if (Number(newVal) == 2) {
      deliveryType.value = '2'
    } else if (Number(newVal) == 3) {
      deliveryType.value = '3'
    }
  }
)

/* 补贴类型 start */

// 监听补贴类型
watch(
  () => props.subsidyType,
  (newVal) => {
    // console.log(newVal, '监听补贴类型')
    if (Number(newVal) == 0) {
      subsidyType.value = '0'
    } else if (Number(newVal) == 1) {
      subsidyType.value = '1'
    } else if (Number(newVal) == 2) {
      subsidyType.value = '2'
    } else if (Number(newVal) == 3) {
      subsidyType.value = '3'
    }
  }
)
// 确定补贴类型
const confirmBonus = () => {
  // 1.校验是否选择了补贴类型
  if (!subsidyType.value) {
    Taro.showToast({
      icon: 'error',
      title: '请选补贴类型'
    })
    return
  }
  // 2.校验是否填写了费用
  if (!bonusFee.value) {
    Taro.showToast({
      icon: 'error',
      title: '请填费用'
    })
    return
  }
  switch (subsidyType.value) {
    case '0':
      bonusStr.value = '无'
      break
    case '1':
      bonusStr.value = '二次送货费' + bonusFee.value + '元'
      break
    case '2':
      bonusStr.value = '补签单费用' + bonusFee.value + '元'
      break
    case '3':
      bonusStr.value = '调增送货费' + bonusFee.value + '元'
      break
    default:
      console.log('其他情况')
      break
  }
  bonusPopup.value = false
  bonusFlag.value = '1'
}
/* 补贴类型 end */

/* 卸货服务 start */
// 监听是否卸货
watch(
  () => props.dischargeCargo,
  (newVal) => {
    // console.log(newVal, '监听是否卸货')
    if (Number(newVal) == 0) {
      checkUnload.value = false
    } else if (Number(newVal) == 1) {
      checkUnload.value = true
    }
  }
)

// 监听是否开启卸货服务
watch(
  () => props.dischargeCargo,
  (newVal) => {
    // console.log(newVal, '监听是否开启卸货服务')
    if (Number(newVal) == 0) {
      checkUnload.value = false
    } else if (Number(newVal) == 1) {
      checkUnload.value = true
    }
  }
)

// 监听卸货服务类型
watch(
  () => props.dischargeServer,
  (newVal) => {
    // console.log(newVal, '监听卸货服务类型')
    if (Number(newVal) == 1) {
      dischargeServer.value = '1'
    } else if (Number(newVal) == 2) {
      dischargeServer.value = '2'
    } else if (Number(newVal) == 3) {
      dischargeServer.value = '3'
    }
  }
)

// 监听卸货是否电梯
watch(
  () => props.dischargeElevator,
  (newVal) => {
    // console.log(newVal, '监听卸货是否电梯')
    if (Number(newVal) == 0) {
      dischargeElevator.value = '0'
    } else if (Number(newVal) == 1) {
      dischargeElevator.value = '1'
    }
  }
)

// 监听楼层
watch(
  () => props.elevatorNum,
  (newVal) => {
    // console.log(newVal, '监听楼层')
    elevatorNum.value = newVal
    if (Number(newVal) < 9) {
      floorRadio.value = newVal
    } else if (Number(newVal) > 8) {
      floorInput.value = newVal
    }
  }
)
const floorStr = computed(() => {
  // console.log(dischargeElevator.value == 0 ? '楼梯' : '电梯' + floorRadio.value || floorInput.value + '层', '9999999999999999')
  return dischargeElevator.value == 0 ? '楼梯' : '电梯' + floorRadio.value || floorInput.value + '层'
})

// 输入楼层就清空选择框
watch(
  () => floorInput.value,
  (newVal) => {
    // console.log(newVal, '监听楼层输入')
    floorRadio.value = ''
  },
  { deep: true }
)

// 选择楼层就清空输入框
const handleFloorRadio = (value) => {
  if (value) {
    floorInput.value = ''
  }
}

// 确定楼层选择
const confirmFloor = () => {
  // 1.校验是否选择电梯/楼梯 如果为空就让他选择
  if (!dischargeElevator.value) {
    Taro.showToast({
      icon: 'error',
      title: '请选上楼方式'
    })
    return
  }

  // 2.校验是否填写楼层 如果为空就让他选择
  if (!floorInput.value && !floorRadio.value) {
    Taro.showToast({
      icon: 'error',
      title: '请选楼层'
    })
    return
  }

  // 3.赋值给楼层字段
  if (floorInput.value) {
    elevatorNum.value = floorInput.value
  }

  if (floorRadio.value) {
    elevatorNum.value = floorRadio.value
  }
  dischargeCargo.value = '1'
  uploadPopup.value = false
}
/* 卸货服务 end */

watch(
  () => props.destinationAddress,
  (newVal) => {
    console.log(newVal, '目的地变化的时候获取不同的推荐网点')
    const params = {
      destinationAddress: props.destinationAddress || '',
      destinationBranch: props.destinationBranch || ''
    }
    initBranchList(params)
  },
  { immediate: true, deep: true }
)

/* 选择提货方式的时候 */
const checkPickUpMode = (value) => {
  // console.log(value, 159)
}

/* 选中的货物类型 */
const confirmGoods = () => {
  // console.log(goodsType.value, '选中的货物')
  if (goodsType.value.length == 1 && goodsType.value[0] == 1) {
    exhibitionGoods.value = true
    largeCargo.value = false
    goodsTypeStr.value = '展会货物'
  } else if (goodsType.value.length == 1 && goodsType.value[0] == 2) {
    largeCargo.value = true
    exhibitionGoods.value = false
    goodsTypeStr.value = '大件货物'
  } else if (goodsType.value.length == 2 && goodsType.value[0] == 1 && goodsType.value[1] == 2) {
    exhibitionGoods.value = true
    largeCargo.value = true
    goodsTypeStr.value = '展会货物，大件货物'
  } else if (goodsType.value.length == 2 && goodsType.value[0] == 2 && goodsType.value[1] == 1) {
    exhibitionGoods.value = true
    largeCargo.value = true
    goodsTypeStr.value = '展会货物，大件货物'
  } else {
    exhibitionGoods.value = false
    largeCargo.value = false
    goodsTypeStr.value = ''
  }
  goodsTypePopup.value = false
}

/* 推荐网点 start */

const branchList = ref<any[]>([])
const phonePicker = ref([])

const baiduDistance = ref('')
const branchCompanyNo = ref('')
const companyName = ref('')
const destinationBranchShotName = ref('')
const latitude = ref('')
const local = ref('')
const longitude = ref('')
const isNormal = ref('')
const mileage = ref('')

// 选择推荐网点
const handleRadioClick = (item: any) => {
  console.log(item, '选中的推荐网点')
  // 要回传的东西
  baiduDistance.value = item.baiduDistance
  branchCompanyNo.value = item.branchCompanyNo
  companyName.value = item.companyName
  destinationBranchShotName.value = item.destinationBranchShotName
  latitude.value = item.latitude
  local.value = item.local
  longitude.value = item.longitude
  isNormal.value = item.isNormal
  mileage.value = item.mileage
}

// 查询推荐网点列表
async function initBranchList(params) {
  const res = await getReturnForm(params)
  // console.log(params, res, 'returnFrom的入参')
  if (res.statusCode == 200) {
    // console.log(res.data, 'returnFrom的出参')
    // branchList.value = res.data.branch

    // 原始数据里要用到的isNorMal
    // 传递给queryDistance计算距离电话的入参
    const paramsList = res.data.branch.map((item, index) => {
      return {
        branchCompanyNo: item.BRANCHCOMPANYNO,
        originRegion: res.data.t_address,
        isRecommend: '1'
      }
    })
    // console.log(paramsList, 'queryDistance的入参')
    const disArr = await queryDistance(paramsList)
    // console.log(disArr, 'queryDistance的出参')

    let newArr = disArr.data.data.map((obj, index) => {
      console.log(res.data.branch[index].isNormal, '索引对应的isNormal')
      return {
        baiduDistance: Number(obj.baiduDistance) / 1000 + 'km', // 距离
        phoneList: resetPhone(obj.phone), // 手机号列表
        local: obj.local, // 详细地址
        companyName: obj.companyName, // 名称
        branchCompanyNo: obj.branchCompanyNo,
        latitude: obj.localX, // 纬度
        longitude: obj.localY, // 经度
        destinationBranchShotName: obj.destinationBranchShotName, // 目的地简称
        isNormal: res.data.branch[index].isNormal, // 获取对应索引处的 isNormal 字段值 计算送货费的时候用来判断special
        mileage: Number(obj.baiduDistance) / 1000
      }
    })

    branchList.value = newArr

    // console.log(newArr, phonePicker.value, 157)
  }
}

// 重构phone
const resetPhone = (str) => {
  let regex = /\d+/g // 匹配一个或多个连续的数字
  let phoneArr
  if (str.indexOf('/') !== -1) {
    phoneArr = str.split('/')
  } else if (str.indexOf(';') !== -1) {
    phoneArr = str.split(';')
  } else if (str.indexOf('；') !== -1) {
    phoneArr = str.split('；')
  } else if (str.indexOf('、') !== -1) {
    phoneArr = str.split('、')
  } else if (str.indexOf(' ') !== -1) {
    phoneArr = str.split(' ')
  } else if (str.indexOf(')') !== -1) {
    let arr = str.split(')')
    arr.pop()
    phoneArr = arr.map((item) => {
      return item + ')'
    })
  } else if (str.indexOf('）') !== -1) {
    let arr = str.split('）')
    arr.pop()
    phoneArr = arr.map((item) => {
      return item + '）'
    })
  } else {
    phoneArr = [str]
  }
  let result = phoneArr.map((item) => {
    return {
      value: item.match(regex).join(''),
      text: item
    }
  })
  return result
}

const showPhoneModel = ref(false)
const sendPhoneList = (item) => {
  showPhoneModel.value = true
  phonePicker.value = item
}

// 拨打电话
const confirmCall = ({ selectedValue, selectedOptions }) => {
  const phone = selectedOptions.map((val) => val.value).join(',')
  // console.log(phone, '要拨打的电话')
  Taro.makePhoneCall({
    phoneNumber: phone
  })
}

// 查看地图
const lookMap = (latitude, longitude) => {
  // console.log(latitude,longitude,235)
  Taro.openLocation({
    latitude: Number(latitude),
    longitude: Number(longitude)
  })
}

/* 推荐网点 end */

/* 是否加急 */
const checkedJJ = ref(false) // 是否加急 0 不加急 1 加急
watch(
  () => props.initUrgent,
  (newVal) => {
    console.log(newVal, '子组件监听是否加急')
    if (Number(newVal) == 1) {
      checkedJJ.value = true
    } else if (Number(newVal) == 0) {
      checkedJJ.value = false
    } else {
      checkedJJ.value = false
    }
  }
)

/* 是否限时送 */
const checkedXSS = ref(false) // 是否限时送
watch(
  () => props.initLimitSend,
  (newVal) => {
    console.log(newVal, '子组件监听是否限时送')
    if (Number(newVal) == 1) {
      checkedXSS.value = true
    } else if (Number(newVal) == 0) {
      checkedXSS.value = false
    } else {
      checkedXSS.value = false
    }
  }
)

/* 货物类型 */
watch(
  () => goodsTypePopup.value,
  (newVal) => {
    // console.log(newVal, '子组件监听货物类型')
    if (newVal) {
      if (goodsTypeStr.value == '展会货物') {
        goodsType.value = ['1']
      } else if (goodsTypeStr.value == '大件货物') {
        goodsType.value = ['2']
      } else if (goodsTypeStr.value == '展会货物，大件货物') {
        goodsType.value = ['1', '2']
      } else {
        goodsType.value = []
      }
    }
    // console.log(goodsType, '货物类型数组')
  },
  { immediate: true, deep: true }
)

const sendDeliverMsg = (flag) => {
  const sendData = {
    pickUpMode: pickUpMode.value,
    deliveryType: deliveryType.value,
    subsidyType: subsidyType.value,
    bonusFee: bonusFee.value,
    dischargeServer: dischargeServer.value,
    dischargeCargo: dischargeCargo.value,
    dischargeElevator: dischargeElevator.value,
    elevatorNum: elevatorNum.value,
    // 还有推荐网点的数据
    branchSuggest: {
      baiduDistance: baiduDistance.value,
      branchCompanyNo: branchCompanyNo.value,
      companyName: companyName.value,
      destinationBranchShotName: destinationBranchShotName.value,
      latitude: latitude.value,
      longitude: longitude.value,
      local: local.value,
      isNormal: isNormal.value
    },
    urgent: checkedJJ.value == true ? true : false,
    limitSend: checkedXSS.value == true ? true : false,
    // 货物类型
    goodT: {
      largeCargo: largeCargo.value, // 是否大件货物
      exhibitionGoods: exhibitionGoods.value, // 是否展会货物
      specialGoods: false, // 是否特殊货物
      fillingCargo: false, // 是否填仓货物
      holidaySurCharge: false // 是否节假日货物
    }
  }

  // 1.校验提货方式
  if (sendData.pickUpMode == '') {
    Taro.showToast({
      icon: 'error',
      title: '请选提货方式'
    })
    return
  }

  // 2.校验补贴类型
  if (bonusFlag.value == '1') {
    if (subsidyType.value == '') {
      Taro.showToast({
        icon: 'error',
        title: '请选补贴类型'
      })
      return
    }
    if (bonusFee.value == '') {
      Taro.showToast({
        icon: 'error',
        title: '请填补贴费用'
      })
      return
    }
  }

  // 3.校验卸货服务
  if (dischargeCargo.value == '1') {
    // 货物类型
    if (dischargeServer.value == '') {
      Taro.showToast({
        icon: 'error',
        title: '请选货物类型'
      })
      return
    }
    // 上楼方式&楼层
    if (dischargeElevator.value == '') {
      Taro.showToast({
        icon: 'error',
        title: '请选上楼方式'
      })
      return
    }
    if (elevatorNum.value == '') {
      Taro.showToast({
        icon: 'error',
        title: '请填楼层'
      })
      return
    }
  }
  console.log(sendData, '提货方式组件传递的数据')
  if (flag) {
    emit('sendDeliverMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendDeliverMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.deliveryBox {
  .nut-popup {
    padding-bottom: 120rpx;
  }
  .radioBox {
    width: 702rpx;
    margin: 0 auto;
    padding: 20rpx;
    .radio {
      width: 702rpx;
      padding: 12rpx 0;
      border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
      box-sizing: border-box;
    }

    .font1 {
      font-size: 28rpx;
      color: #252525;
      font-weight: bold;
    }

    .font2 {
      font-size: 22rpx;
      padding: 4rpx;
      background: rgba(255, 143, 31, 0.16);
      border-radius: 10rpx;
    }

    .font3 {
      color: #666666;
      font-size: 24rpx;
      margin: 8rpx auto;
    }

    .font4 {
      font-size: 22rpx;
      padding: 6rpx 10rpx;
      background: rgba(255, 143, 31, 0.16);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      border-radius: 10rpx;

      .img {
        vertical-align: middle;
        margin-right: 4rpx;
      }
    }

    .bgBlue {
      color: #0966ff;
      background: #d7e6ff;
    }

    .bgOrange {
      color: #ff8f1f;
      background: #ffeddb;
    }

    .bgRed {
      color: #fa5151;
      background: #fee3e3;
    }

    .icon {
      width: 28rpx;
      height: 28rpx;
    }
  }
  .nut-button--block {
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
    margin: 0 auto;
    margin-bottom: 10rpx;
  }

  .car {
    width: 90rpx;
    height: 90rpx;
    margin-right: 20rpx;
  }
  .icon {
    width: 35rpx;
    height: 35rpx;
  }
  .address {
    width: 350rpx;
  }

  .nut-cell {
    margin: 0 auto;
    border-radius: 0;
  }

  .bg_gray {
    background: #f5f5f5;
    width: 95%;
    height: 88rpx;
  }

  .gray_bg {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    background: #f5f5f5;
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
    margin: 0 auto;
  }

  .flex_st {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn_box {
    .button {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
    }
  }

  .bonusBox {
    .tit {
      width: 150rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .nut-input {
      width: 498rpx;
      height: 72rpx;
      border-radius: 8rpx;
      background: #f5f5f5;
      margin: 0 24rpx;
      text-align: center;
    }
    .button {
      width: 702rpx;
      height: 88rpx;
      border-radius: 88rpx;
      margin: 10rpx auto;
      background: #000;
    }
  }
  .unloadBox {
    .btn_box {
      .nut-radio__button {
        width: 340rpx;
        height: 96rpx;
        border-radius: 16rpx;
      }
    }
    .nut-radio__button--active::after {
      // border:none;
      border-radius: 0;
    }

    .nut-input-box {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .nut-input {
      width: 204rpx;
      height: 72rpx;
      border-radius: 88rpx;
      background: #f4f5f6;
      display: inline-block;
      padding: 15rpx 0;
    }
  }
  .nut-radio__button {
    width: 210rpx;
    height: 72rpx;
    border-radius: 88rpx;
    justify-content: center;
  }

  .nut-switch {
    // background: #0966ff;
  }

  .nut-radio__button--active {
    color: #0966ff;
    font-weight: bold;
  }

  .nut-radio__button--active {
    color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
    border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
  }

  .nut-radio__button--active::after {
    border-radius: 88rpx;
    background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
  }

  .nut-checkbox__button--active::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--nut-checkbox-button-background-active, var(--nut-primary-color, #0966ff));
    opacity: 0.05;
    content: '';
  }

  .nut-checkbox__button--active {
    background: transparent;
    color: var(--nut-checkbox-button-font-color-active, var(--nut-primary-color, #0966ff));
    border: 2rpx solid var(--nut-checkbox-button-border-color-active, var(--nut-primary-color, #0966ff));
    position: relative;
  }

  .nut-radio-group--horizontal .nut-radio {
    // margin: 0 10rpx;
  }

  .nut-radio-group--horizontal .nut-radio {
    margin: 5rpx;
  }
  .goodsTypeBox {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10rpx;
    .nut-radio__button {
      width: auto;
      margin: 0 auto;
    }
    .goodsBox {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      margin: 0 auto;
      .nut-checkbox {
        margin: 10rpx 8rpx;
      }
    }
  }

  .confirm {
    width: 702rpx;
    height: 88rpx;
    border-radius: 200rpx;
    background: #0966ff;
    box-sizing: border-box;
    position: fixed;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
